<template>
    <div class="model-form">
        <el-page-header @back="goBack" content="更新商家"></el-page-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">基本设置</el-menu-item>
            <el-menu-item index="2">结算设置</el-menu-item>
            <el-menu-item index="3">管理员设置</el-menu-item>
            <el-menu-item index="4">详细信息</el-menu-item>
        </el-menu>
        <div class="model-content">
            <el-form v-if="activeIndex=='1'" ref="ruleForm" :rules="rules" :model="form" label-width="160px">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="门头" size="mini" prop="logo">
                            <avatar v-model="form.logo"></avatar>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家名称" size="mini" prop="name">
                            <el-input v-model="form.name" name="name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属分类" size="mini" prop="shopCatalog">
                            <el-select style="width: 100%;" v-model="form.shopCatalog" filterable clearable
                                placeholder="请选择">
                                <el-option v-for="item in shopCatalogOptions" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序号" size="mini" prop="sortNum">
                            <el-input v-model="form.sortNum" name="sortNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="老板" size="mini" prop="boss">
                            <el-input v-model="form.boss" name="boss"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址" size="mini" prop="address">
                            <el-input v-model="form.address" name="address">
                                <template slot="append">
                                    <el-button type="primary" size="small" @click="geo">定位</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客服电话" size="mini" prop="tel">
                            <el-input v-model="form.tel" name="tel"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="地图信息" size="mini">
                            <qqmap zoom="18" @poi-change="changePoi" :lat="form.lat" :lng="form.lng"></qqmap>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
                        <el-button @click="goBack">取消</el-button>
                        <el-button type="primary" @click="updateData">确定</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-form v-if="activeIndex=='2'" ref="ruleForm" :rules="rules" :model="form" label-width="160px">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <el-form-item label=" 商家类型设置" size="mini" prop="logo">
                                    <el-checkbox v-model="form.productModel">商品</el-checkbox>
                                    <el-checkbox v-model="form.foodModel">餐饮</el-checkbox>
                                    <el-checkbox v-model="form.serviceModel">服务</el-checkbox>
                                    <el-checkbox v-model="form.cashModel">收银</el-checkbox>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-show="form.productModel">
                                <div class="h1_title">商品结算设置</div>
                            </el-col>
                            <el-col :span="24" v-if="form.productModel">
                                <el-form-item label="商品商家结算方式" size="mini" prop="name">
                                    <el-radio-group v-model="form.balanceMethod">
                                        <el-radio :label="0">供货价结算</el-radio>
                                        <el-radio :label="1">抽成结算</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.productModel">
                                <el-form-item v-if="form.balanceMethod==1" label="商品抽成结算比例" size="mini" prop="takeRate">
                                    <el-input v-model="form.takeRate" name="takeRate">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.productModel">
                                <el-form-item label="默认配送方式" size="mini" prop="name">
                                    <el-radio-group v-model="form.deliveryMethod">
                                        <el-radio :label="0">默认商家配送</el-radio>
                                        <el-radio :label="1">默认门店自提</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <div class="h1_title">餐饮结算设置</div>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="是否开启外卖" size="mini" prop="takeaway">
                                    <el-switch v-model="form.takeaway" active-text="开启" inactive-text="关闭"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="出餐通知跑腿" size="mini" prop="transport">
                                    <el-switch v-model="form.transport" active-text="开启" inactive-text="关闭"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="菜品订单是否自动接单" size="mini" prop="autoOrder">
                                    <el-switch v-model="form.autoOrder" active-text="开启" inactive-text="关闭"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="默认配送方式" size="mini" prop="dishDeliveryMethod">
                                    <el-radio-group v-model="form.dishDeliveryMethod">
                                        <el-radio :label="0">默认商家配送</el-radio>
                                        <el-radio :label="1">默认门店自提</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="最大配送服务范围" size="mini" prop="distance">
                                    <el-input v-model="form.distance" name="distance">
                                        <template slot="append">米</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="起送价" size="mini" prop="startPrice">
                                    <el-input v-model="form.startPrice" name="startPrice">
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="配送费" size="mini" prop="freight">
                                    <el-input v-model="form.freight" name="freight">
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="外卖订单结算比例" size="mini" prop="takeawayRate">
                                    <el-input v-model="form.takeawayRate" name="takeawayRate">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="自提订单结算比例" size="mini" prop="selfRate">
                                    <el-input v-model="form.selfRate" name="selfRate">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="堂食订单结算比例" size="mini" prop="hallFoodRate">
                                    <el-input v-model="form.hallFoodRate" name="hallFoodRate">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="配送时长" size="mini" prop="transportTime">
                                    <el-input v-model="form.transportTime" name="transportTime">
                                        <template slot="append">分钟</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="预计出餐时间" size="mini" prop="eatOutTime">
                                    <el-input v-model="form.eatOutTime" name="eatOutTime">
                                        <template slot="append">分钟</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="菜品订单销量" size="mini" prop="dishSaleNum">
                                    <el-input v-model="form.dishSaleNum" name="dishSaleNum">
                                        <template slot="dishSaleNum">单</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="form.foodModel">
                                <el-form-item label="是否开启堂食" size="mini" prop="boss">
                                    <el-switch v-model="form.hallFood" active-text="开启" inactive-text="关闭"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-show="form.cashModel">
                                <div class="h1_title">收银结算设置</div>
                            </el-col>
                            <el-col :span="24" v-if="form.cashModel">
                                <el-form-item label="收银抽成结算比例" size="mini" prop="cashRate">
                                    <el-input v-model="form.cashRate" name="cashRate">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="updateData">确定</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <el-form v-if="activeIndex=='3'" ref="ruleFormRef" :model="form" label-width="160px"></el-form>
            <el-form v-show="activeIndex=='4'" ref="extFormRef" :model="extForm" :rules="extRules" label-width="160px">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-row :gutter="10">
                            <el-col :span="20">
                                <el-form-item label="商家别名" size="mini" prop="name">
                                    <el-input v-model="extForm.name" name="name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="联系人姓名" size="mini" prop="contact">
                                    <el-input v-model="extForm.contact" name="contact"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="联系人电话" size="mini" prop="phone">
                                    <el-input v-model="extForm.phone" name="phone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="法人身份证" size="mini" prop="cardNo">
                                    <el-input v-model="extForm.cardNo" name="cardNo"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="法人身份证正面" size="mini" prop="cardNoFront">
                                    <avatar v-model="extForm.cardNoFront"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="法人身份证反面" size="mini" prop="cardNoReverse">
                                    <avatar v-model="extForm.cardNoReverse"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="营业执照" size="mini" prop="license">
                                    <avatar v-model="extForm.license"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="银行开户许可证" size="mini" prop="permit">
                                    <avatar v-model="extForm.permit"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="法人手持身份证" size="mini" prop="cardNoHand">
                                    <avatar v-model="extForm.cardNoHand"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="平台联盟商家承诺书" size="mini" prop="letter">
                                    <avatar v-model="extForm.letter"></avatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="商家简介" size="mini" prop="note">
                                    <el-input v-model="extForm.note" name="note" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="updateExtData">确定</el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    import common from "@/mixins/common.js";
    import avatar from "@/components/avatar.vue";
    import qqmap from "@/components/qqmap.vue";

    var shopUpdateConfig = {};
    shopUpdateConfig.methods = {};
    shopUpdateConfig.mixins = [common];
    shopUpdateConfig.components = {
        avatar,
        qqmap,
    };

    shopUpdateConfig.methods.updateData = function () {
        var self = this;
        this.$refs["ruleForm"].validate(function (valid) {
            if (valid) {
                self.updateDataPost();
            } else {
                console.log("error submit!!");
                return false;
            }
        });
    };

    shopUpdateConfig.methods.updateDataPost = function () {
        var self = this,
            data = this.form;
        if (this.deforeUpdateData) {
            this.deforeUpdateData();
        }
        this.postData("/tenantRest/shop/update.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: "修改数据成功",
                    type: "success",
                });
                //window.history.go(-1)
                self.$router.go(-1);
            } else {
                self.$message.error(res.msg);
            }
        });
    };

    shopUpdateConfig.methods.updateExtData = function () {
        var self = this;
        this.$refs["extFormRef"].validate(function (valid) {
            if (valid) {
                self.updateExtDataPost();
            } else {
                console.log("error submit!!");
                return false;
            }
        });
    };

    shopUpdateConfig.methods.updateExtDataPost = function () {
        var self = this,
            data = this.extForm;
        data.id = data.shop;
        this.postData("/tenantRest/shopext/update.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: "修改数据成功",
                    type: "success",
                });
                //window.history.go(-1)
                self.$router.go(-1);
            } else {
                self.$message.error(res.msg);
            }
        });
    };

    shopUpdateConfig.data = function () {
        return {
            form: {
                logo: "",
                name: "",
                shopCatalog: "",
                sortNum: "",
                boss: "",
                address: "",
                tel: "",
                productModel: false,
                foodModel: false,
                serviceModel: false,
                cashModel: false,
                balanceMethod: "",
                deliveryMethod: "",
                takeaway: false,
                transport: false,
                autoOrder: false,
                dishDeliveryMethod: "",
                takeawayRate: "",
                selfRate: "",
                hallFoodRate: "",
                transportTime: "",
                eatOutTime: "",
                dishSaleNum: "0",
                hallFood: false,
                cashRate: "",
            },
            extForm: {
                name: "",
                contact: "",
                phone: "",
                cardNo: "",
                cardNoFront: "",
                cardNoReverse: "",
                license: "",
                permit: "",
                cardNoHand: "",
                letter: "",
                note: "",
            },
            activeIndex: "1",
            value1: false,
            checkList: [],
            rules: {
                name: [{
                    required: true,
                    message: "请输入商家名称",
                    trigger: "blur",
                }, ],
            },
            extRules: {
                name: [{
                    required: true,
                    message: "请输入商家名称",
                    trigger: "blur",
                }, ],
            },
        };
    };

    shopUpdateConfig.mounted = function () {
        var id = this.$route.query.id;
        var self = this;
        var data = {};
        data.id = id;
        this.postData("/tenantRest/shop/view.htm", data, function (res) {
            if (res.code == 0) {
                self.form = res;
            }
        });
    };

    shopUpdateConfig.methods.geo = function () {
        var param = {};
        param.address = this.form.address;
        var self = this;
        this.postData("/tenantRest/area/lbs.htm", param, function (result) {
            if (result.code == 0) {
                self.form.lat = result.lat;
                self.form.lng = result.lng;
                if (result.provinceId) {
                    self.form.province = result.provinceId;
                }
                if (result.cityId) {
                    self.form.city = result.cityId;
                }
                if (result.countyId) {
                    self.form.area = result.countyId;
                }
            }
        });
    };
    shopUpdateConfig.methods.changePoi = function (event) {
        console.log(event);
        this.form.lat = event.lat;
        this.form.lng = event.lng;
    };
    shopUpdateConfig.methods.handleSelect = function (index) {
        console.log(index);
        this.activeIndex = index;
        if (index == "4") {
            var id = this.$route.query.id;
            var self = this;
            var data = {};
            data.id = id;
            this.postData("/tenantRest/shopext/view.htm", data, function (res) {
                if (res.code == 0) {
                    self.extForm = res;
                }
            });
        }
    };

    shopUpdateConfig.computed = {};
    shopUpdateConfig.computed.shopCatalogOptions = function () {
        return this.$store.state.shopCatalogOptions;
    };

    shopUpdateConfig.destroyed = function () {
        console.log("destroyed add view ");
    };
    export default shopUpdateConfig;
</script>

<style>
</style>